<template>
  <div v-if="pageAuth">
    <!-- 头部 -->
    <page-header :title="$t('m.settingHelpCenter')">
      <el-button
        type="primary"
        @click="$router.push('/settings/help-center/cm')"
        v-if="editAuth"
      >
        {{ $t('m.branch_Create') }}
      </el-button>
    </page-header>

    <!--容器-->
    <div class="container box-index">
      <div class="box_index">
        <!-- 搜索栏 -->
        <search-bar :options="searchBarOptions" />

        <!--分割线-->
        <div class="line"></div>

        <!-- 表格栏 -->
        <div class="table-box">
          <!--表格-->
          <fast-table :options="fastTableOptions" :data="page.records" />
          <!-- 分页 -->
          <pagination
            :total="page.total"
            :current="page.current"
            :size="page.size"
            @changePageSize="changePageSize"
            @changePageNum="changePageNum"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import page from '@/mixins/page'
import SearchBar from '@/components/search-bar.vue'
import pagination from '@/components/pagination.vue'
import FastTable from '@/components/fast-table.vue'

export default {
  components: { SearchBar, pagination, FastTable },
  mixins: [page],
  data () {
    return {
      // 表格options
      fastTableOptions: {
        columns: [
          {
            label: this.$t('m.invite_Type'),
            prop: 'type',
            formatter: row =>
              this.$format.strFormat(
                this.$format.stateFormat(row.type, this.$dict.helpCenter.type)
              )
          },
          {
            label: this.$t('m.settingHelpCenterQuestion'),
            prop: 'title',
            showOverflowTooltip: true,
            formatter: row => this.$format.langFormat(row.title)
          },
          {
            label: this.$t('m.settingHelpCenterAnswer'),
            prop: 'content',
            showOverflowTooltip: true,
            formatter: row => this.$format.langFormat(row.content)
          },
          {
            label: this.$t('m.status'),
            prop: 'state',
            switch: true,
            activeValue: 0,
            inactiveValue: 1,
            switchChange: this.editState
          },
          {
            label: this.$t('m.branch_Creationdate'),
            prop: 'createTime',
            formatter: row => this.$format.dateformat(row.createTime)
          },
          // 操作列
          {
            operate: true,
            showcolumn: this.permissionsId(154),
            // 按钮展示方式： tile-平铺（默认展示方式）, dropdown-下拉
            display: 'list',
            actions: [
              {
                label: this.$t('m.branch_Edit'),
                permission: row => true,
                click: row => this.toEdit(row)
              }
              // {
              //   label: this.$t('m.delete'),
              //   permission: row => true,
              //   click: this.remove,
              // },
            ]
          }
        ]
      },

      params: {
        type: ''
      },
      options: [
        {
          value: '',
          label: this.$t('m.all')
        }
      ],
      pageAuth: this.permissionsId(124),
      editAuth: this.permissionsId(154),
      stateAuth: this.permissionsId(155)
    }
  },
  created () {
    if (!this.pageAuth) {
      return
    }
    this.getSearchBar()
    this.getPage()
  },
  methods: {
    getSearchBar () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          {
            value: this.params.search,
            type: 'input',
            prop: 'search',
            label: this.$t('m.search_'),
            placeholder: this.$t('m.settingHelpCenterQuestion')
          },
          {
            value: this.params.rangeTime,
            type: 'datePicker',
            prop: 'rangeTime',
            label: this.$t('m.branch_Creationdate')
          },
          {
            value: this.params.type,
            type: 'select',
            prop: 'type',
            label: this.$t('m.invite_Type'),
            placeholder: this.$t('m.pleaseChoose'),
            options: this.options.concat(this.$dict.helpCenter.type)
          }
        ]
      }
    },
    getPage () {
      this.$api.helpCenter.getPage(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    },
    // 修改状态
    editState (row) {
      // console.log('modifyState',  row)
      if (!this.stateAuth) {
        return
      }
      this.$api.helpCenter.modifyState({
        id: row.id,
        state: row.state == 0 ? 1 : 0
      }).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.getPage()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    toEdit (row) {
      this.setPageNum(this.page.current, this.page.size, this.params)
      this.$router.push({
        path: '/settings/help-center/cm',
        query: { id: row.id }
      })
    }
  }
}
</script>

<style scoped></style>
